<template>
  <div id="userAppraise">
    <div class="userMaterialTitle">
      <h2 class="active">我的评论 <span></span></h2>
    </div>
    <div class="userAppraiseContent">
      <ul>
        <li v-for="(item, index) in remarkData" :key="index" @click="handleDetail(item.workId, item.objectType)">
          <img :src="$globalImageUrl + item.avatar" alt="">
          <div class="userAppraiseContentInfo">
            <h2>{{item.userName}}</h2>
            <span>{{item.createTime}}</span>
            <p>{{item.content}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userAppraise',
  data () {
    return {
      remarkData: []
    }
  },
  created () {
    this.fetchComment()
  },
  methods: {
    // 跳转到评论作品
    handleDetail (id, type) {
      if (type == 1) {
        this.$router.push('/worksDetail?worksId=' + id)
      } else if (type == 2) {
        this.$router.push('/worksDetail?sceneType=sell&worksId=' + id)
      } else if (type == 3) {
        this.$router.push('/worksDetail?sceneType=masterStudio&worksId=' + id)
      } else if (type == 4) {
        this.$router.push('/worksDetail?sceneType=acquirePrize&worksId=' + id)
      } 
    },
    // 获取评论列表
    fetchComment () {
      this.$api.getComment({
        userId: this.$store.state.user.userId,
        pageNum: 1
      }).then(res => {
        if (res.code === 0) {
          console.log(res)
          this.remarkData = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#userAppraise{
  .userAppraiseContent{
    padding: .2rem;
    ul{
      li{
        font-size: 0;
        padding-bottom: .2rem;
        img{
          display: inline-block;
          width: .5rem;
          height: .5rem;
          vertical-align: top;
          border-radius: 500px;
        }
        div.userAppraiseContentInfo{
          display: inline-block;
          width: calc(100% - .5rem);
          padding-left: .2rem;
          h2{
            font-size: .18rem;
            font-weight: bold;
            color: #333;
            line-height: .26rem;
          }
          span{
            font-size: .14rem;
            font-weight: 500;
            color: #999;
            line-height: .22rem;
          }
          p{
            font-size: .16rem;
            font-weight: 500;
            color: #333;
            line-height: .24rem;
          }
        }
      }
    }
  }
}
</style>
